<template>
  <el-container id="person">
    <el-aside width="200px">
      <!-- 多好单内容 -->
      <div class="person-con">
        <div class="header-imgdiv">
          <h2>后台管理</h2>
        </div>
        <div class="person-left">
          <div class="person-left-nav" @click="getNavIndex">
            <div class="nav-con nav-con1" @click="navIndex = 1" :class="{navClass1:navIndex==1}">
              <span>
                <img src="../../../static/images/person/home.png">
              </span>
              首页
            </div>
            <div
              v-show="identity==2"
              class="nav-con"
              @click="navIndex = 2"
              :class="{navClass1:navIndex==2}">
              <span>
                <img src="../../../static/images/person/fabu.png">
              </span>
              发布商品
            </div>
            <div
              v-show="identity==2"
              class="nav-con"
              @click="navIndex = 3"
              :class="{navClass1:navIndex==3}">
              <span>
                <img src="../../../static/images/person/guanli.png">
              </span>
              商品管理
            </div>
            <div
              v-show="identity==2"
              class="nav-con"
              @click="navIndex = 4"
              :class="{navClass1:navIndex==4}">
              <span>
                <img src="../../../static/images/person/caiwu.png">
              </span>
              财务管理
            </div>
            <div
              v-show="identity==2"
              class="nav-con"
              @click="navIndex = 5"
              :class="{navClass1:navIndex==5}">
              <span>
                <img src="../../../static/images/person/zhanghu.png">
              </span>
              账户资料
            </div>
          </div>
        </div>
      </div>
    </el-aside>
    <el-container>
      <el-header height="68px">
        <!-- 头部 -->
        <div id="header">
          <div class="header-con">

            <div class="header-left-title" v-show="identity==2">
              <!-- 如果没有入驻不显示 -->
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">多好单首页</el-breadcrumb-item>
                <el-breadcrumb-item>后台管理</el-breadcrumb-item>
                <el-breadcrumb-item>{{this.$store.state.headerTitle}}</el-breadcrumb-item>
                <el-breadcrumb-item>{{this.$store.state.headerTitleTwo}}</el-breadcrumb-item>
              </el-breadcrumb>
            </div>

            <div class="header-right">

              <div class="login-img-con">
                <img :src="touxiang" style="object-fit: cover;">
              </div>

              <div class="right-login-num">{{dd_phone}}</div>

              <i class="el-icon-arrow-down down-text" style="font-size: 14px;"></i>
              
              <!-- 点击头像显示用户列表 -->
              <div class="header-login-list">
                <div class="login-list-con2" @click="reToken()">
                  <i class="iconfont icon-guanji"></i>
                  <span class="con2-text">退出登录</span>
                </div>
              </div>
              <div class="login-triangle-con"></div>
            </div>
          </div>
        </div>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
// import "../../scss/person/person.scss";

/* export default {
  data() {
    return {
      // 组件数据
      comData: [
        { name: "Home" },
        { name: "Placing" },
        { name: "Goods" },
        { name: "Finance" },
        { name: "Team" }
      ],
      userInfo: null,
      // 左侧导航下标
      navIndex: 1,
      // 判断是否点击修改
      resetInp: false,
      // 添加商品数据
      addShopData: {
        goods_name: "", //商品标题
        goods_id: "", //商品id
        goods_thumbnail_url: "", //商品主图
        goods_gallery_urls: null, //商品轮播图
        mall_name: null, //店铺名称
        category_id: null, //商品类目ID
        category_name: null, //商品类目名
        goods_eval_score: "", //商品评分
        min_group_price: "", //商品原价
        coupon_discount: "", //优惠券面额
        coupon_total_quantity: "", //优惠券总数量
        promotion_rate: "", //佣金比例
        sales_tip: "", //模糊销量（总数）
        goods_postCouponPrice: "", //劵后价
        coupon_remain_quantity: "", //优惠劵剩余
        coupon_start_time: "", //优惠券生效时间
        coupon_end_time: "", //优惠券失效时间
        goods_desc: "", //导购文案
        goods_whether: "", //当goods\_whether等于1的时候 单子通过 当等于0的时候单子不通过2等于待审核3是已下架
        user_id: "", //用户id
        admin_id: null, //审核人的id
        time: "" //提交时间
      },
      // 管理商品数据
      guangLiData: "",
      // 判断是否商品已发布
      isIssue: true,
      // 商品链接存在
      shopLink: "",
      // token
      token: "",
      // 获取左边导航的下标
      asideIndex: "1",
      input: "",
      // 导购文案变量
      textarea3: "",
      // 拼多多的产品链接
      duoDuoLink: "",
      // 商品id
      duoDuoLinkId: "",
      // 保存产品所有数据
      duoDuoData: "",
      // 商品管理内容
      goodsClassData: {},
      // 商品管理的输入值
      inputShop: "",
      // 时间开始值
      startTime: "",
      phoneNum: "",
      // 导购文案变量
      textarea1: "",
      // 导购文案变量
      textarea2: "",
      // 判断招商的状态
      attract_state: "",
      // 判断是否入驻
      identity: '',
      userData: null,
      // 重新提交商品的ID
      checkID: null,
      // 传给商品管理的下标
      open3: 0,
      // 手机号码
      dd_phone: null,
      // 头像
      touxiang: null
    };
  },
  methods: {
    // 查询是否入驻
    checkData() {
      if (this.token) {
        let data = {
          access_token: this.token
        };
        this.axios.get("/userbaseinfo/get", { params: data })
          .then(res => {
            let userData = res.data.data;
            this.identity = userData.identity;
            this.attract_state = userData.attract_state;
            this.$store.state.attract_state = this.attract_state;
            this.dd_phone = this.hiddenPhone(userData.dd_phone);
            this.touxiang = userData.attract_head_portrait;
          });
      }
    },
    // 标题导航
    getNavIndex() {
      if (this.navIndex == 1) {
        this.$store.state.headerTitle = "首页";
        this.$router.push({path:'/person/Home'});
      } else if (this.navIndex == 2) {
        this.$store.state.headerTitle = "发布商品";
        this.$router.push({path:'/person/Placing'});
      } else if (this.navIndex == 3) {
        this.$store.state.headerTitle = "商品管理";
        this.$router.push({path:'/person/Goods'});
      } else if (this.navIndex == 4) {
        this.$store.state.headerTitle = "财务管理";
        this.$router.push({path:'/person/Finance'});
      } else if (this.navIndex == 5) {
        this.$store.state.headerTitle = "账户管理";
        this.$router.push({path:'/person/Team'});
      }
    },
    // 跳转到多好单首页
    toHome() {
      this.$router.push({ name: "home" });
    },
    // 隐藏手机号中间四位数方法
    hiddenPhone(mytel) {
      var tel = mytel;
      tel = "" + tel;
      var ary = tel.split("");
      ary.splice(3, 4, "****");
      var tel1 = ary.join("");
      return tel1;
    },
    // 获取拼多多的产品数据
    getDuoDuoData() {
      let newStr = this.ApiUtils.ApiStr.getStrLeft(this.duoDuoLink, 0, 40);
      this.duoDuoLinkId = this.duoDuoLink.Right(10);
      if (newStr == "https://mobile.yangkeduo.com/goods2.html") {
        this.axios
          .post(
            "/getyzm/data/goods_detail",
            this.$qs.stringify({
              goods_id_list: this.duoDuoLinkId
            })
          )
          .then(res => {
            // 显示产品参数
            this.isIssue = true;
            let duoDuoDataList = res.data.goods_detail_response.goods_details;
            for (let i = 0; i < duoDuoDataList.length; i++) {
              if (i == 0) {
                this.duoDuoData = duoDuoDataList[0];
              }
            }
            // 预先计算数值再赋值
            // 佣金比例
            let new_promotion_rate = this.duoDuoData.promotion_rate;
            new_promotion_rate = new_promotion_rate / 100;
            // 优惠券剩余
            let new_coupon_discount = this.duoDuoData.coupon_discount;
            new_coupon_discount = new_coupon_discount / 100;
            // 商品原价
            let new_min_group_price = this.duoDuoData.min_group_price;
            new_min_group_price = new_min_group_price / 100;
            // 优惠券生效时间
            let new_coupon_start_time = this.duoDuoData.coupon_start_time;
            new_coupon_start_time = this.ApiTime.changeTime(
              new_coupon_start_time * 1000
            );
            // 优惠券失效时间
            let new_coupon_end_time = this.duoDuoData.coupon_end_time;
            new_coupon_end_time = this.ApiTime.changeTime(
              this.duoDuoData.coupon_end_time * 1000
            );
            // 商品标题
            this.addShopData.goods_name = this.duoDuoData.goods_name; //!商品标题
            this.addShopData.goods_id = this.duoDuoData.goods_id; //!商品id
            this.addShopData.goods_thumbnail_url = this.duoDuoData.goods_thumbnail_url; //!商品主图
            this.addShopData.goods_gallery_urls = this.duoDuoData.goods_gallery_urls; // null;//!商品轮播图
            this.addShopData.mall_name = this.duoDuoData.mall_name; //! null;//店铺名称
            this.addShopData.category_id = this.duoDuoData.category_id; // !null;//商品类目ID
            this.addShopData.category_name = this.duoDuoData.category_name; // !null;//商品类目名
            this.addShopData.goods_eval_score = this.duoDuoData.goods_eval_score; // !5;//商品评分
            this.addShopData.min_group_price = new_min_group_price; //!3250;//商品原价
            this.addShopData.coupon_discount = new_coupon_discount; //!"30";//优惠券金额
            this.addShopData.coupon_total_quantity = this.duoDuoData.coupon_total_quantity; //!1000;//优惠券总数量
            this.addShopData.promotion_rate = new_promotion_rate; //"200";//佣金比例
            this.addShopData.sales_tip = this.duoDuoData.sales_tip; //!"500";//模糊销量（总数）
            this.addShopData.coupon_remain_quantity = this.duoDuoData.coupon_remain_quantity; //!300;//优惠劵剩余
            this.addShopData.coupon_start_time = new_coupon_start_time; // !1556035200;//优惠券生效时间
            this.addShopData.coupon_end_time = new_coupon_end_time; //!1556207999;//优惠券失效时间
            this.addShopData.goods_desc = this.duoDuoData.goods_desc; //! "口罩";//导购文案
            // ? 自己计算券后价 商品总价减去优惠券金额
            let new_goods_postCouponPriceLong =
              new_min_group_price - new_coupon_discount;
            // ?保留两位小数
            this.addShopData.goods_postCouponPrice =
              new_goods_postCouponPriceLong.toFixed(2) * 100;
            this.duoDuoData.goods_postCouponPrice =
              new_goods_postCouponPriceLong * 100;
          });
      } else {
        // 失败提示
        this.$notify.error({
          title: "链接错误",
          message: "请输入正确的商品链接"
        });
      }
    },
    // !退出登录
    reToken() {
      // 删除token
      this.ApiCookie.removeCookie("token", -1);
      // 并且跳转到首页
      this.toHome();
    },
    setNavActive() {
      var path = this.$route.path;
      if (path == '/person/Home') {
        this.$store.state.headerTitle = "首页";
        this.navIndex = 1;
      } else if (path == '/person/Placing') {
        this.$store.state.headerTitle = "发布商品";
        this.navIndex = 2;
      } else if (path == '/person/Goods') {
        this.$store.state.headerTitle = "商品管理";
        this.navIndex = 3;
      } else if (path == '/person/Finance') {
        this.$store.state.headerTitle = "财务管理";
        this.navIndex = 4;
      } else if (path == '/person/Team') {
        this.$store.state.headerTitle = "账户管理";
        this.navIndex = 5;
      }
      
    }
  },
  created() {
    var getToken = this.ApiCookie.getCookie("token");
    if (getToken) {
      this.token = getToken;
      this.isLogin = true;
    }
    this.setNavActive();
    this.checkData();
    this.ApiScroll.setScrollTop(0);
  },
}; */
</script>


<style lang="scss" scoped>
  // 去除按钮默认样式
@mixin clearBtn {
  border: 0;
  background-color: transparent;
  outline: none;
}

// 图片居中显示
@mixin imgCenter {
  width: 50%;
  height: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  &>img {
    width: 100%;
  }
}

// 个人中心
#person {
  width: 100%;
  height: 100%;
  background: #F7FBFF;
  font-family: MicrosoftYaHei;

  .el-header {
    padding: 0;
  }

  .el-main {
    height: calc(100% - 68px);
    padding: 30px;
    background-color: #f7fbff;
  }

  #header {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
    height: 100%;
    background: #fff;
    box-shadow: 0px 3px 6px 0px rgba(72, 82, 123, 0.1);

    .header-con {
      width: 100%;
      height: 100%;
      margin: 0 auto;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;

      .header-left {
        width: 200px;
        background: #11225A;
        position: relative;
      }

      .header-left-title {
        display: flex;
        margin-left: 16px;
        align-items: center;
        font-size: 14px;
        color: #444;
      }


      .header-right {
        display: flex;
        align-items: center;
        cursor: pointer;
        box-sizing: border-box;
        padding-right: 30px;
        color: #898999;
        font-size: 14px;

        .login-img-con {
          width: 42px;
          height: 42px;
          border-radius: 50%;
          overflow: hidden;

          &>img {
            width: 100%;
            height: 100%;
          }
        }

        // 手机号码
        .right-login-num {
          height: 68px;
          box-sizing: border-box;
          padding: 0 10px;
          line-height: 68px;
        }

        // 个人中心列表
        .header-login-list {
          width: 135px;
          height: 40px;
          text-align: center;
          background: #fff;
          box-shadow: 2px 3px 6px 0px rgba(72, 82, 123, 0.1);
          border: 1px solid #eee;
          display: none;
          position: absolute;
          top: 64px;
          right: 30px;

          .login-list-con1,
          .login-list-con2 {
            height: 40px;
            line-height: 40px;
            background: #fff;
            font-size: 14px;
            font-weight: bold;
            box-sizing: border-box;
          }

          &>div:hover {
            background-color: #efefef;
          }
        }
      }

      .header-right:hover .header-login-list {
        display: block;
      }
    }

  }

  // 多好单 放单中心
  .person-con {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
    height: 100%;
    margin: 0 auto;

    .header-imgdiv {
      width: 200px;
      height: 68px;
      background-color: #2a3850;
      line-height: 68px;
      text-align: center;
      color: #fff;
    }

    .person-left {
      width: 200px;
      height: calc(100% - 68px);
      background-color: #2a3850;
      color: #fff;
      text-align: center;
      overflow: hidden;

      .person-left-nav {
        width: 100%;

        .nav-con {
          width: 100%;
          height: 50px;
          line-height: 50px;
          font-size: 14px;
          text-align: center;
          cursor: pointer;
          box-sizing: border-box;

          &>span {
            padding-right: 10px;
          }

        }

        .nav-con1 {
          padding-right: 28px;
        }
      }
    }

    .person-right {
      flex: 6;
      padding: 20px;
      height: 1200px;
      margin-left: 200px;
      margin-top: 100px;
      background: #F7FBFF;
    }
  }

  // 弹窗修改
  .demo-reset {
    position: fixed;
    top: 0px;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);

    .reset-con {
      width: 600px;
      height: 838px;
      background: rgba(255, 255, 255, 1);
      margin: 0 auto;
      margin-top: 30px;
      text-align: center;

      .reset-title {
        width: 600px;
        height: 60px;
        background: rgba(40, 120, 255, 1);
        line-height: 60px;
        color: #fff;
        position: relative;

        .closeDemo {
          position: absolute;
          top: 0;
          right: 0;
          width: 60px;
          height: 60px;
          font-size: 40px;
          cursor: pointer;
        }
      }

      .reset-title-tip {
        width: 600px;
        height: 44px;
        background: rgba(40, 120, 255, 0.1);
        line-height: 44px;
        font-size: 14px;
        color: #FF3939;
      }

      .from-con {
        width: 100%;

        .list-one-con {
          width: 100%;
          height: 100px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 10px;

          .list-one-left {
            flex: 1;
            height: 100px;
          }

          .list-one-right {
            flex: 3;
            height: 100px;
            display: flex;
            align-items: center;
          }
        }

        .list-two-con {
          width: 100%;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 10px;

          .list-one-left {
            flex: 1;
            height: 20px;
          }

          .list-one-right {
            flex: 3;
            height: 20px;
            display: flex;
            align-items: center;
            font-size: 18px;
            font-family: MicrosoftYaHei;
            font-weight: 400;
          }
        }

        .list-three-con {
          width: 100%;
          height: 100px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 10px;

          .list-one-left {
            flex: 1;
            height: 100px;

            .textarea {
              height: 100px !important;
            }
          }

          .list-one-right {
            flex: 3;
            height: 100px;
            display: flex;
            width: 300px;

            .el-textarea__inner {
              width: 80%;
              height: 80px;
            }
          }

        }

        .list-four-con {
          width: 100%;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 10px;

          .list-one-left {
            flex: 1;
            height: 30px;
          }

          .list-one-right {
            flex: 3;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: left;

            .input-con {
              width: 300px;
            }

          }
        }

        .list-five-con {
          width: 100%;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 30px;

          .list-one-left {
            flex: 1;
            height: 30px;
          }

          .list-one-right {
            flex: 3;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: left;

            .input-con {
              width: 300px;
            }

          }
        }

        .list-six-con {
          width: 100%;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 30px;

          .list-one-left {
            flex: 1;
            height: 30px;
          }

          .list-one-right {
            flex: 3;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: left;

            .input-con {
              width: 300px;
            }

          }
        }

        .list-sever-con {
          width: 100%;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 30px;

          .list-one-left {
            flex: 1;
            height: 30px;
          }

          .list-one-right {
            flex: 3;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: left;

            .input-con {
              width: 300px;
            }

          }
        }

        .list-eight-con {
          width: 100%;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 30px;

          .list-one-left {
            flex: 1;
            height: 30px;
          }

          .list-one-right {
            flex: 3;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: left;
            cursor: pointer;

            .input-con {
              width: 300px;
            }
          }
        }

        .list-ten-con {
          width: 100%;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 30px;

          .list-ten-div {
            line-height: 50px;
            border-radius: 30px;
            margin-top: 50px;
            width: 240px;
            height: 50px;
            background: rgba(40, 120, 255, 1);
            border-radius: 6px;
            color: #fff;
            cursor: pointer;
          }
        }

      }
    }
  }
}

.navClass1 {
  background: #324DA6 !important;
}
</style>

